<template>
  <ul class="my-at">
    <li v-for="item in forwardsData" :key="item.id" class="mb-2 flex border-b-1 pb-3 mb-3">
      <div class="w-20 h-20 mr-2">
        <img style="width: 100%;height: 100%" :src="item?.comment?.user?.avatarUrl" alt="">
      </div>
      <div class="flex-1">
        <div class="flex justify-between">
          <p class="mt-0">
            <span class="mr-2">{{ item?.comment?.user?.nickname }}</span>
            <span>评论</span>
          </p>
          <span>{{ timestampToYMD(item.time, 's') }}</span>
        </div>
        <span>{{ item?.comment?.content }}</span>
        <div class=" yu-bgColor-tew-only mt-2 p-2">
          <at-type :resource="item.resource" :resourceType="item.resourceType"/>
          <div v-if="item.resourceType === 2">
            <p>
              <span class="mr-2">@{{ item?.resource?.user?.nickname }}</span>
              <span>{{ shareType(item?.resource?.type) }}：</span>
              <span>{{ item?.resource?.json?.msg }}</span>
            </p>
            <at-type v-if="item?.resource?.type === 18" :resource="item?.resource?.json?.song"
                     :resourceType="item?.resource?.type"/>
            <at-type v-if="item?.resource?.type === 13" :resource="item?.resource?.json?.playlist"
                     :resourceType="item?.resource?.type"/>
            <show-big-img :pics="item?.resource.pics"/>
          </div>
        </div>

        <span class="yu-textColor-hover float-right mt-2 mb-2" @click="showReply(item?.comment?.commentId)">回复</span>
        <!-- 采用 br清除浮动-->
        <br clear="all"/>
        <Reply
            :saveId="saveId"
            :resourceType="item.resourceType"
            :id="item?.resource?.id"
            :threadId="item?.comment?.threadId"
            :commentId="item?.comment?.commentId"
            @setSaveIdNull="setSaveIdNull"
        />
      </div>
    </li>
  </ul>
</template>

<script setup>
import {getMsgForwards} from "@/api/message/index";
import {timestampToYMD, shareType} from "@/utils/index";
import ShowBigImg from '@/components/ShowBigImg/index.vue'
import AtType from '@/components/AtType/index.vue'
import Reply from '@/components/Reply/index.vue'
import {reactive, ref, toRefs} from "vue";
import {useStore} from "@/store/index";

const store = useStore()
const forwardsData = ref([])

const data = reactive({
  saveId: null // 保存的显示回复框的id
})

const {message, saveId} = toRefs(data)

getMsgForwards().then(res => {
  const {code, forwards} = res
  if (code === 200)
    forwardsData.value = forwards.map(item => {
      switch (item.type) {
        case 2:
          const obj = {
            ...item,
            ...JSON.parse(item.json),
          }
          return {
            ...obj,
            resource: {
              ...obj.resource,
              json: JSON.parse(obj.resource.json)
            }
          }
        case 3:
          return {
            ...item,
            ...JSON.parse(item.json)
          }
      }
    })
  console.log(forwardsData.value)
})

// 显示回复框
const showReply = (id) => {
  if (data.saveId !== id) data.saveId = id
  else data.saveId = null
}
// 保存的saveId设置为Null
const setSaveIdNull = (saveId) => {
  data.saveId = saveId
}

</script>

<style scoped lang="scss">

</style>
